<!-- 页面说明 -->

<template>
	<benben-popup v-model="show" :mask="true" :mask-close-able="true" mode='bottom' :z-index='999'>
		<view class="popup_content">
			<view class="popup_title">
				<image :src='STATIC_URL+"10.png"' mode="aspectFill"></image>
				<text>优惠</text>
				<image :src='STATIC_URL+"11.png"' mode="aspectFill"></image>
				<image @tap.stop="show=false" class="close_img" :src='STATIC_URL+"129.png"' mode="aspectFill"></image>
			</view>
			<view class='homePage_fd2_0'>
				<scroll-view scroll-y style="height: 100%;">
					<view class='flex flex-wrap align-center homePage_fd2_0_c1' v-for="(item,index) in list"
						:key="index" @click="confirm(item)">
						<view class='homePage_fd2_0_c0_c0' style="width: 176rpx;margin-right: 24rpx;">
							<view class='flex flex-wrap align-center justify-center'
								style="align-items: baseline;font-weight: 500;color: #fff;transform: translateY(-8rpx);">
								<text class='homePage_fd2_0_c0_c0_c0_c1' v-if="isInteger(Number(item.money))">{{Number(item.money)}}</text>
								<text style="font-size: 40rpx;" class='homePage_fd2_0_c0_c0_c0_c1' v-else>{{Number(item.money)}}</text>
								
								<text style="font-size: 42rpx;" v-if="isInteger(Number(item.money))">元</text>
								<text style="font-size: 34rpx;" v-else>元</text>
							</view>
							<view class='flex flex-wrap align-center justify-center homePage_fd2_0_c0_c0_c1'>
								<text class='homePage_fd2_0_c0_c0_c1_c0'>满</text>
								<text class='homePage_fd2_0_c0_c0_c1_c0'>{{Number(item.min_order_money)}}</text>
								<text class='homePage_fd2_0_c0_c0_c1_c0'>可减</text>
							</view>
						</view>
						<view style="width: calc(100% - 200rpx);" class='flex flex-direction flex-wrap align-stretch flex-sub homePage_fd2_0_c0_c1'>
							<view class='flex align-center justify-between'>
								<text class='homePage_fd2_0_c0_c1_c0_c0'>{{item.name}}</text>
								<text class="buy_use">立即使用</text>
							</view>
							<view class='flex flex-wrap align-center homePage_fd2_0_c0_c1_c1'>
								<text class='homePage_fd2_0_c0_c1_c1_c0'>{{item.content}}</text>
							</view>
							<view class='flex flex-wrap align-center homePage_fd2_0_c0_c1_c2'>
								<text class='homePage_fd2_0_c0_c1_c1_c0'>有效期至：{{item.end_time}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</benben-popup>
</template>

<script>
	export default {
		props: {
			value: Boolean,
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		computed: {
			show: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit("input", val)
				}
			}
		},
		methods: {
			confirm(info = {}) {
				this.show = false;
				this.$emit("confirm", info);
			},
			isInteger(obj) {
				return obj % 1 === 0
			},
		},
	}
</script>

<style lang="scss" scoped>
	.popup_content {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx 32rpx 24rpx 32rpx;
	}

	.popup_title {
		margin-bottom: 32rpx;
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		image {
			width: 28rpx;
			height: 10rpx;
		}

		text {
			margin: 0 20rpx;
		}

		.close_img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 0;
		}
	}

	.buy_use {
		width: 120rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 24rpx;
		opacity: 1;
		border: 1rpx solid #EF3131;
		font-size: 24rpx;
		color: #EF3131;
	}

	.homePage_fd2_0_c4 {
		background: linear-gradient(165deg, #BB4833 0%, #962F1D 100%);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		width: 396rpx;
		line-height: 54rpx;
		font-size: 34rpx;
		color: #fff;
		height: 54rpx;
		box-shadow: 5rpx 4rpx 4rpx 1rpx rgba(161, 55, 35, 0.16);
		margin: 17rpx 0rpx 0rpx 0rpx;
	}

	.homePage_fd2_0_c3 {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 0rpx;
		top: 7rpx;
	}

	.homePage_fd2_0_c2_c0 {
		color: #999999;
		font-size: 17rpx;
		font-weight: 400;
		width: 254rpx;
		text-align: center;
	}

	.homePage_fd2_0_c1 {
		background: url(https://yongzhixing.niurenjianzhan.com/uploads/mini/722.png) no-repeat;
		height: 180rpx;
		width: 100%;
		background-size: 100% auto;
		padding: 24rpx 24rpx 0 0;
		margin-bottom: 24rpx;
	}

	.homePage_fd2_0_c0_c1_c2 {
		width: 100%;
		margin-top: 12rpx;
	}

	.homePage_fd2_0_c0_c1_c1_c0 {
		color: #999999;
		font-size: 24rpx;
		font-weight: 400;
	}

	.homePage_fd2_0_c0_c1_c1 {
		margin: 17rpx 0rpx 5rpx 0rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 20rpx;
	}

	.homePage_fd2_0_c0_c1_c0_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.homePage_fd2_0_c0_c1 {
		
	}

	.homePage_fd2_0_c0_c0_c1_c0 {
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
	}

	.homePage_fd2_0_c0_c0_c1 {
		display: flex;
		align-items: center;
	}

	.homePage_fd2_0_c0_c0_c0_c1 {
		font-size: 56rpx;
		font-weight: 400;
		max-width: 95rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.homePage_fd2_0_c0_c0_c0_c0 {
		font-size: 17rpx;
		font-weight: 400;
	}

	.homePage_fd2_0_c0_c0 {}

	.homePage_fd2_0_c0 {
		background: url(https://www.guochaoxiaoju.com/uploads/mini/700.png) no-repeat;
		height: 126rpx;
		width: 401rpx;
		background-size: 100% auto;
		padding: 0rpx 0rpx 0rpx 0rpx;
	}

	.homePage_fd2_0 {
		width: 100%;
		height: 513rpx;
		background-size: 100% auto;
	}
</style>